<template>
    <div>
        <div style="width: 100%;display: flex;justify-content: center;">
          <div style="width: 1200px;">
            <div>
                <div style="display: flex;align-items: center;border-bottom: 1px solid #e6e6e6;padding: 20px 0;margin-top: 10px;">
                    <div style="height: 16px;width: 8px;background-color:#256aff;border-radius: 5px;margin-right: 10px;"></div>
                    <el-breadcrumb :separator-icon="ArrowRight">
                      <!-- <el-breadcrumb-item :to="{ path: '/' }">homepage</el-breadcrumb-item> -->
                      <el-breadcrumb-item :to="{ path: '/index' }">首页</el-breadcrumb-item>
                      <el-breadcrumb-item>联系我们</el-breadcrumb-item>
                    </el-breadcrumb>
                </div>
                <div style="display:flex;justify-content: center;flex-direction: column;font-size:26px;align-items: center;margin-top: 50px;">
                  <span style="text-align: center;font-weight: bold;color:#363636">联系我们</span>
                  <span style="font-size:16px;color:#c8c8c8">Contact us</span>
                </div>
                <div style="width: 100%;height: 300px;margin-top: 50px;box-shadow: 0 1px 4px rgba(0, 21, 41, 0.08);padding: 20px;">
                    <div style="display: flex;justify-content: space-between;">
                        <div style="width: 32%;">
                            <el-input
                              v-model="Form.userName"
                              placeholder="姓名"
                              :prefix-icon="UserFilled"
                            />
                        </div>
                        <div style="width: 32%;">
                            <el-input
                              v-model="Form.userPhone"
                              placeholder="联系方式"
                              :prefix-icon="PhoneFilled"
                            />
                        </div>
                        <div style="width: 32%;">
                            <el-input
                              v-model="Form.userEmail"
                              placeholder="电子邮件"
                              :prefix-icon="Message"
                            />
                        </div>
                    </div>
                    <div style="margin-top: 20px;">
                        <div style="width: 100%;">
                            <el-input
                              type="textarea"
                              :rows="5"
                              v-model="Form.remark"
                              placeholder="备注"
                              :prefix-icon="Comment"
                            />
                        </div>
                    </div>
                    <div>
                        <div style="text-align: center;font-size: 14px;color: #c1c1c1;margin: 20px 0;">
                            请输入您的联系方式，我们将会联系您
                        </div>
                        <div style="text-align: center;">
                            <el-button type="primary" style="width: 100px;" @click="submit">提交</el-button>
                        </div>
                    </div>
                </div>
                <div style="margin: 30px 0;font-size: 12px;display: flex;justify-content: space-between;">
                    <!-- <span>湖北省随州市XXXXX</span>
                    <span>177888888888</span>
                    <span>111111@163.com</span> -->
                </div>
            </div>
            
          </div>
        </div>
      <div style="width: 100%;">
        <!-- <div style="width: 1200px;"> -->
          <Foot />
        <!-- </div> -->
      </div>
    </div>
</template>

<script setup lang="ts">
import Foot from './foot.vue'
import { ref } from 'vue'
import { ArrowRight } from '@element-plus/icons-vue'
import { Calendar, Search, UserFilled, PhoneFilled, Message, Comment } from '@element-plus/icons-vue'
import { $AddUser } from '../api/api'

const Form = ref({})

const submit = async ()=>{
    let ret = await $AddUser(Form.value)
    console.log(ret)
    if(ret.code==0){
      Form.value = {}
    }
    // newsList.value = ret.rows
    // console.log('newsList',newsList.value)
  }
</script>

<style scoped>

</style>